<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>使用slot分发内容__slot的用法</title>
</head>
<body>

<div id="app">
    <children-component>
        <p>这是分发的内容</p>
        <p>更多分发的内容</p>
    </children-component>
</div>

<hr>

<div id="app1">
    <children-component>
        <h2 slot="header">标题</h2>
        <p>正文内容</p>
        <p>更多正文内容</p>
        <div slot="footer">底部信息</div>
    </children-component>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    /**
     * 单个slot用法：在子组件内使用特殊的<slot>元素可以为这个子组件开启一个slot(插槽)，在父组件模板里
     * 插入在子组件标签内的所有内容将替代子组件的<slot>标签及它的内容。
     *
     * **/


    /**
     *子组件children-component的模板内定义了一个<slot>元素，且使用一个<p>作为默认的内容，在父组件没有使用slot时，会渲染这段默认的文本；
     * 如果写入了slot，那么就会替换整个<slot>。
     * **/
    Vue.component("children-component",{
        template:"<div><slot><p>如果父组件没内容，我将作为默认内容出现</p></slot></div>"  //注意子组件<slot>内的备用内容，它的作用域是子组件本身
    });

    var app = new Vue({
        el:"#app",
    });


    /**
     * 具名slot：给<slot>元素指定一个name后可以分发多个内容，具名slot可以与单个slot共存。
     * **/


    /**
     * 子组件children-component的模板内定义了多个<slot>元素，且在父组件没有使用slot时，会渲染所有的具名<slot>，不会渲染单个<slot>；
     * **/
    Vue.component("children-component",{
        template:"<div class='container'>" +
            "<div class='header'>" +
            "<slot name='header'>备份的标题信息</slot>" +
            "</div>" +
            "<div class='main'>" +
            "<slot>默认备份</slot>" +
            "</div>" +
            "<div class='footer'>" +
            "<slot name='footer'>备份的底部信息</slot>" +
            "</div>" +
            "</div>"
    });

    var app1 = new Vue({
        el:"#app1"
    })

    //在组合使用组件时，内容分发API至关重要。



</script>
</body>
</html>
